<template>
  <el-dialog
    :title="'历史版本 - ' + currentRow.name"
    :visible.sync="open"
    width="640px"
    append-to-body
    @close="closeDialog"
    class="business-dialog"
    :close-on-click-modal="false"
  >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="version" label="版本号">
        <template slot-scope="scope">
          <el-button type="text" @click="handlePreview(scope.row)">{{
            scope.row.version
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="templateUseCount" label="引用次数" />
      <el-table-column prop="createByName" label="负责人" />
      <el-table-column prop="createDept" label="发布部门" />
      <el-table-column prop="updateTime" label="更新日期" />
      <el-table-column label="操作" width="60">
        <template slot-scope="scope">
          <el-button type="text" @click="handlePreview(scope.row)"
            >预览</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
import qs from "qs";
import { getTemplateVersionList } from "@/api/business";

export default {
  name: "TemplateVersionHistoryModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    currentRow: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    async visible(val) {
      this.open = val;
      if (val) {
        this.getList();
      } else {
        this.tableData = [];
      }
    },
  },
  data() {
    return {
      open: this.visible,
      tableData: [],
    };
  },
  methods: {
    async getList() {
      const res = await getTemplateVersionList(this.currentRow?.id);
      this.tableData = res.data;
    },
    handlePreview(row) {
      const query = qs.stringify({
        id: row.id,
        editContentType: "template",
        entry: "preview",
      });
      window.open(`/editor/view?` + query, "_blank");
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__title {
  font-size: 14px;
}
::v-deep .el-dialog__body {
  padding-top: 0;
}
</style>
